<template>
	<view class="app c-wrap">
		<view class="wrapper">
			 
			<view class="welcome ">
				{{$t('clogin.label.welcomeback')}}
			</view>

			<view class="input-content" v-if="!param.displayusernameloginview">
				<!-- #ifdef H5 -->
				<view class="input-item">
					<text class="tit">{{$t("clogin.label.mobilephone")}}</text>
					<view class="row">
						<input v-model="param.mobile" type="number" maxlength="11" 
							placeholder-style="color: #909399" />
					</view>
				</view>
				<view class="input-item">
					<text class="tit">{{$t("clogin.label.ccode")}}</text>
					<view class="row">
						<input v-model="param.captcha" type="number" maxlength="6" 
							placeholder-style="color: #909399" />
						<mix-code :mobile="param.mobile" templateCode="clogin_mobilelogin"></mix-code>
					</view>
				</view> 
				<button type="default" class="c-default" @click="clickLogin">{{$t("clogin.label.login")}}</button>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="c-default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					withCredentials="true">{{$t('clogin.label.mobilequicklogin')}}</button>
				<!-- #endif -->

			</view>

			<view class="input-content" v-if="param.displayusernameloginview">
				<view class="input-item">
					<text class="tit">{{$t('clogin.label.account')}}</text>
					<view class="row">
						<input v-model="param.username" type="text" maxlength="11"  
							placeholder-style="color: #909399" />
					</view>
				</view>
				<view class="input-item">
					<text class="tit">{{$t('clogin.label.password')}}</text>
					<view class="row">
						<input v-model="param.password" type="password" maxlength="11"  
							placeholder-style="color: #909399" />
					</view>
				</view>
				<button type="default" class="c-default" @click="loginbyusername">{{$t("clogin.label.login")}}</button>
			</view>
		</view>
		
		<view class="">
			<view class="c-center c-m-t-20 p-otherloginmethod" @click="changeloginview">{{$t('clogin.label.otherloginmethod')}}</view>
		</view>
		
		

		<view class="cls_authorizeinfo" v-if="param.displayGetUserInfoView">
			<view class="cls_authorize">
				<view class="c-block">
					<view class="c-title">{{$t('clogin.msg.getinfomation')}}</view>
					<button class="c-default" style="margin-top: 20px;" open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true">{{$t('clogin.msg.authorizedinfomation')}}</button>
				</view>		
			</view>

			<view class="cls_cover"></view>
		</view>
		
		<view class="agreement">
			<view @click="checkAgreement">{{$t('clogin.msg.agreewhilelogin')}}</view>
			<view class="tit" @click="clickService">{{$t('clogin.label.userservice')}}</view>
			<view class="tit" @click="clickPrivate">{{$t('clogin.label.privacypolicy')}}</view>
		</view>
	</view>
</template>

<script>
	import mixcode from '@/pages/clogin/components/mix-code.vue'
	export default {
		data() {
			return {
				sp: {},
				param: {
					displayusernameloginview: false,
					displayGetUserInfoView: false,
					mobile: '',
					captcha:null,
					username: '',
					password: '',
				},
			}
		},
		components:{
		  'mix-code':mixcode
		},
		onLoad(options) {
			let that = this;
			that.$u.clogin.initCode(options);
		},
		onShow: function() {
			let that = this;
		},
		methods: {
			changeloginview: function() {
				this.param.displayusernameloginview = this.param.displayusernameloginview ? false : true;
				//alert(clogin.getSessionSourcepageurl());
			},
			getPhoneNumber: function(e) {
				let that = this;
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					//提交微信的手机加密信息，加密后提交签到按钮
					that.$u.clogin.unirequest("/csmwj/cloginweixinajax/logintogetmobile", {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						openid: that.$u.clogin.openid
					}, function(res) {
						that.param.displayGetUserInfoView = true;
					});
				} else {
					uni.showToast({
						title: that.$t('clogin.msg.failgetmobile'),
						icon: "none"
					});
				}
			},
			getUserInfo: function(e) {
				let that = this;
				//隐藏认证框 & 保存用户信息
				if (true) {

					console.log(userInfo);
					let userInfo = e.detail.userInfo;
					that.$u.clogin.unirequest("/csmwj/cloginweixinajax/updateweixininfo", {
						openid: that.$u.clogin.openid,
						nickname: userInfo.nickName,
						gender: userInfo.gender,
						language: userInfo.language,
						city: userInfo.city,
						province: userInfo.province,
						city: userInfo.city,
						country: userInfo.country,
						avatarurl: userInfo.avatarUrl,
					}, function(res) {
						that.$u.clogin.setSessionThird(res.data.token,res.data.mobile, res.data.third);
						if (that.$u.clogin.getIsLogined()) {
							that._closeAndRefreshParentView();
						} else {
							uni.redirectTo({
								url: '/pages/clogin/cloginbindlogin?openid=' + that.$u.clogin.openid
							});
						}
					});

				}
			},
			_closeAndRefreshParentView: function() {
				let that = this;
				uni.navigateBack({
					success: () => {
						// let page = getCurrentPages().pop(); //跳转页面成功之后
						// if (!page) {
						// 	return;
						// } else {
						// 	//#ifdef MP-WEIXIN	
						// 	page.onLoad(page.options); // page自带options对象.
						// 	//#endif
						// 	//#ifndef MP-WEIXIN
						// 	//window.location = that.$u.clogin.getSessionSourcepageurl();
						// 	page.onLoad(page.options);
						// 	//#endif
						// }
					}
				});
			},
			clickService: function() {
				let that = this;
				uni.navigateTo({
					url: '/pages/clogin/cloginpolicy?type=service'
				});
			},
			clickPrivate: function() {
				let that = this;
				uni.navigateTo({
					url: '/pages/clogin/cloginpolicy?type=private'
				});
			},
			clickLogin: function() {
				let that = this;
				if(that.$u.clogin.assertnotnull(that.param.mobile,that.$t('clogin.label.mobilephone'))===false) return;
				if(that.$u.clogin.assertnotnull(that.param.captcha,that.$t('clogin.label.ccode'))===false) return;
				that.$u.clogin.unirequest("/csmwj/cloginuser/mobilequickerlogin", {
					openid: that.$u.clogin.openid,
					mobile: that.param.mobile,
					captcha: that.param.captcha
				}, function(res) {
					let token = res.data ? res.data.token : null;
					if (token) {
						//alert(res.data.third);
						that.$u.clogin.setSessionThird(res.data.token,res.data.mobile, res.data.third);
						that._closeAndRefreshParentView();
					} else {
						uni.redirectTo({
							url: '/pages/clogin/cloginbindlogin?openid=' + that.$u.clogin.openid + '&mobile=' +
								that.param.mobile
						});
					}
				});
			},
			loginbyusername: function() {
				let that = this;
				if(that.$u.clogin.assertnotnull(that.param.username,that.$t('clogin.label.account'))===false) return;
				if(that.$u.clogin.assertnotnull(that.param.password,that.$t('clogin.label.password'))===false) return;
				that.$u.clogin.unirequest("/csmwj/cloginuser/loginbyusername", {
					openid: that.$u.clogin.openid,
					username: that.param.username,
					password: that.param.password
				}, function(res) {
					
					let token = res.data.token;
					
					if (token!=null && token!="") {
						that.$u.clogin.setSessionThird(token,res.data.mobile, res.data.third);
						that._closeAndRefreshParentView();
					} else {
						uni.redirectTo({
							url: '/pages/login/cloginbindlogin?openid=' + that.$u.clogin.openid + '&mobile=' + that
								.param.mobile
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.app {
		//padding-top: 15vh;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		padding-bottom: 40rpx;
	}
 
	.welcome {

		font-size: 22px;
		padding: 100px 25px 40px 25px;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}

	.input-content {
		padding: 0 60rpx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30rpx;
		background: #f8f6fc;
		height: 120rpx;
		border-radius: 4px;
		margin-bottom: 50rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.row {
			width: 100%;
		}

		.tit {
			height: 50rpx;
			line-height: 56rpx;
			font-size: 26rpx;
			color: #606266;
		}

		input {
			flex: 1;
			height: 60rpx;
			font-size: 30rpx;
			color: #303133;
			width: 100%;
		}
	}

	/* 其他登录方式 */
	.other-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
		margin-top: 80rpx;

		.line {
			margin-bottom: 40rpx;

			.tit {
				margin: 0 32rpx;
				font-size: 24rpx;
				color: #606266;
			}

			&:before,
			&:after {
				content: '';
				width: 160rpx;
				height: 0;
				border-top: 1px solid #e0e0e0;
			}
		}

		.item {
			font-size: 24rpx;
			color: #606266;
			background-color: #fff;
			border: 0;

			&:after {
				border: 0;
			}
		}

		.icon {
			width: 90rpx;
			height: 90rpx;
			margin: 0 24rpx 16rpx;
		}
	}

	.agreement {
		font-size: 11px;
		color: #999; 
		text-align: center;
		padding-top: 30px;

		.mix-icon {
			font-size: 36rpx;
			color: #ccc;
			margin-right: 8rpx;
			margin-top: 1px;

			&.active {
				//color: $base-color;
			}
		}

		.tit {
			color: #40a2ff;
		}
	}


	.cls_authorizeinfo {
		.cls_cover {
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			height: 100%;
			width: 100%;
			background-color: #000;
			opacity: 0.6;
			filter: alpha(opacity=60);
			z-index: 9998;
		}

		.cls_authorize {
			position: fixed;
			left: 0px;
			bottom: 0px;
			width: 100%;
			height: 120px;
			background-color: #fff;
			z-index: 9999;
		}
	}
	.p-otherloginmethod{
		font-size: 14px;
	}
</style>
